window.addEventListener("DOMContentLoaded", function() {
	
	// 防止在引入的外部jQuery文件不起作用而导致出错的情况
	if(!window.jQuery) {
		console.log("不支持jQuery引入。");
		let script1 = document.createElement("script");
		script1.type = "text/javascript";
		script1.src = "/commonJS/jquery-3.5.1.js";
		document.body.appendChild(script1);
	}
	
	jQuery.noConflict();
	jQuery(function($) {
		// 以下是轮播图动画函数区域，translateCarouselAnimation
		let carouselUL1 = $("#carousel-ul1").children();
		let carouselCircleUL = $("#nav-carousel-div .carousel-circle-ul");
		carouselUL1.each(function(i, ele) {
			carouselCircleUL.append($(`<li>${(i+1)}</li>`));

		});
		$(".user-layout-div .display-flex:first").children().each(function(i, ele) {
			$(".user-layout-div .carousel-circle-ul").append($(`<li>${(i+1)}</li>`));

		});
		$(".user-layout-div .carousel-circle-ul").children().click(function() {
			let index = $(this).index();
			let left = $(".user-layout-div .display-flex:first").children().eq(index).position().left;
			$(".user-layout-div .display-flex:first").stop(true).animate(
				{
					left: -left
				},
				"slow", "swing"
			);
			$(this).css({
				background: "orange"
			})
			.siblings().css({
				background: ""
			});
		});
		// 每次窗口缩放时，都要让这个盒子的left变为0，否则后面左移或右移后页面一片空白，因为之前的宽度与窗口调整后的宽度不一样
		$(window).resize(function() {
			$(".user-layout-div .carousel-circle-ul").children().first().click();
			
		});
		transformCarousel($("#nav-carousel-div"), carouselUL1, carouselCircleUL);
		// 下面这个函数因为使用到了jQuery语法,选择器,所以要放在jQuery加载环境中,不能写在jQuery.ready()之外
		function transformCarousel(obj1Father, obj1, obj2, startIndex = 0, event1 = "mouseover", event2 = "mouseleave") {
			try {
				if(obj1 && obj2) {
					// 如果这两个对象存在，则进行下一步的轮播图操作
					obj1.set01 = null;
					obj1.zeroIndex01 = startIndex;
					obj1.flag01 = true;
					obj1.len = obj1.length; // 最先开始进行轮播图的第一个元素的下标，0为从第一个元素开始
					clearInterval(obj1.set01); // 节流阀作用
					obj2.children().on("click", function() {
						obj1.flag01 = false;
						obj1.zeroIndex01 = $(this).index();
						carousel01(obj1, obj2, obj1.zeroIndex01);
						console.log(obj1.zeroIndex01);
					});
					obj1.set01 = setInterval(function() {
						if(obj1.flag01) {
							carousel01(obj1, obj2, obj1.zeroIndex01);
							obj1.zeroIndex01++;
							if(obj1.zeroIndex01 === obj1.len) {
								obj1.zeroIndex01 = 0;
							}
							return;
						}
						console.dir("gogogo123  " + obj1.flag01);

					}, 3000);
					// 当鼠标悬浮于某个元素之上时，一般为父元素上，则暂时停止轮播图
					obj1Father.on(event1 + " click mouseenter", function(e) {
						obj1.flag01 = false;
						console.log(e.type);
						return;
					});
					obj1Father.on(event2 + " mouseout", function(e) {
						obj1.flag01 = true;
						console.log(e.type);
						return;
					});
					document.addEventListener("visibilitychange", function() {
						if(document.hidden) {
							obj1.flag01 = false;
							console.log(document.hidden);
							return;
						}
						obj1.flag01 = true;
						console.log(document.hidden);
					});
					
					return;
				}
				throw new Error("这个对象不存在，请保证获取的是正确的对象。");
			} catch(err) {
				alert(err.message);
			}
		}
		// 轮播图的又一个封装函数
		function carousel01(obj1, obj2, zeroIndex01) {
			obj1.eq(zeroIndex01)
				.css({
					"transform": "translate(0, 0)",
					"opacity": "1"
				})
				.siblings()
				.css({
					"transform": "",
					"opacity": "0"
				});
			obj2.children().eq(zeroIndex01)
				.css({
					"background-color": "#ffffcc",
					"color": "#0494fd",
					"border": "2px solid #d37468"
				})
				.siblings()
				.css({
					"background-color": "",
					"color": "",
					"border": ""
				});
		}
	});

});